<template>
   <div class="tabs">
    <el-tag size="small" v-for="(tag,index) in tags" :key="tag.name" 
     :closable="tag.name !== 'home'"   :effect="$route.name === tag.name ? 'dark':'plain'"
     @click="changeMenu(tag)"
     @close="handleMenu(tag,index)"
     >
    {{tag.label}}
    </el-tag>
   </div>
</template>

<script>
    import {mapState,mapMutations} from 'vuex'
export default {
   name:'CommonTag',
   data() {
    return {
        
    }
   },
   computed:{
    ...mapState({
        tags:state => state.tab.tabsList
    }),
   },
   methods:{
    changeMenu(tag){
      this.$router.push(tag.path)
    },
    ...mapMutations({
      close:'closeTag'
    }),
    handleMenu(tag,index){
        const length = this.tags.length - 1
        this.close(tag)
        if(tag.name !== this.$route.name){
          return;
        }
        if(index === length){
            this.$router.push({
              name:this.tags[index - 1].name
            })
        } else {
          this.$router.push({
            name:this.tags[index].name
          })
        }
    }
   }
}
</script>

<style lang="less" scoped>
  .tabs{
    padding: 20px;
    .el-tag{
        margin-right: 15px;
        cursor:pointer;
    }
  }
</style>